<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>练习5</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      $(function() {
        //全选
        $("#CheckedAll").click(
                function () {
                  //对固定属性，使用prop
                  //1.如果没有checked属性，就添加，并设置值
                  //2.如果有，就直接设置值
                  $("input[name=items]").prop("checked", true);
                }
        )

        //全不选
        $("#CheckedNo").click(
                function () {
                  $("input[name=items]").prop("checked", false);
                }
        )

        //反选
        $("#CheckedRev").click(
                function () {
                  //判断当前是不是选中
                  $("input[name='items']").each(
                          function () {
                            var isChecked = this.checked;
                            if (isChecked) {
                              //选中的，改成不选中
                              $(this).prop("checked", false);
                            } else {
                              //没选中的，改成选中
                              $(this).prop("checked", true);
                            }
                          }
                  )
                }
        )

        //全选/全不选
        $("#checkedAll_2").click(
                function () {
                  //对 <input type="checkbox" id="checkedAll_2"/> 是否选中进行判断
                  if (this.checked) {
                    //全选
                    $("input[name=items]").prop("checked", true);
                  } else {
                    $("input[name=items]").prop("checked", false);
                  }
                }
        )
      })
    </script>
  </head>
  <body>
  <form method="post" action="">
    请选择您的爱好!
    <br><input type="checkbox" id="checkedAll_2"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="游泳"/>游泳
    <input type="checkbox" name="items" value="唱歌"/>唱歌
    <br/>
    <input type="button" id="CheckedAll" value="全　选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反　选"/>

    <input type="button" id="send" value="提　交"/>
  </form>
  </body>
</html>